<template>
  <div class="component-outside-content" :style="{...magnifyFontSizeObj}">
    <div class="content-title" :style="{ flexDirection: treemapData?.typeList?.length > 4 ? 'column' : '' }">
      <span :style="{ marginBottom: treemapData?.typeList?.length > 4 ? '8px' : 0 }">{{ treemapData?.title }}</span>
      <div class="content-title-right" :style="{ flexDirection: treemapData?.typeList?.length > 4 ? 'column' : '' }">
        <el-row :gutter="10" v-for="rowItem of Math.ceil(treemapData?.typeList?.length / 4)" :key="rowItem"
                :style="{ marginTop: rowItem !== 1 ? '10px' : '' }">
          <el-col :span="treemapData?.typeList?.length > 4 ? 6 : 24 / treemapData?.typeList?.length"
                  v-for="(colItem, index) of treemapData?.typeList?.filter((x, i) => rowItem === 1 ? i < 4 : i > 3)"
                  :key="index">
            <div class="content-title-item">
              <div :style="{backgroundColor: colItem.color}"></div>
              <div style="white-space: nowrap; overflow: visible">{{ colItem.label }}</div>
            </div>
          </el-col>
        </el-row>
      </div>
    </div>
    <div class="content-sum">
      <span>{{ treemapData?.sumTitle }}：{{
          treemapData?.sumAcreage
        }}万m²
      </span>
      <div style="display: flex; align-items: center">
        <span class="triangle" :class="{ 'triangle-reverse': treemapData?.sumPercentage > 0 }"></span>
        <span
            :style="{ color: treemapData?.sumPercentage > 0 ? '#01FEFF' : '#E13535' }">{{
            Math.abs(treemapData?.sumPercentage)
          }}%</span>
        <span>&nbsp;同比上年</span>
      </div>
    </div>
    <div ref="echartDom" :class="$attrs.class"></div>
  </div>
</template>

<script setup>
import {ref, defineProps, onMounted, onUnmounted, inject, shallowRef, defineOptions, defineExpose} from 'vue'
import { pxToRem } from "@/utils/index";

const props = defineProps({
  treemapData: {
    type: Object,
    default: () => {
    }
  },
  dialogData: {
    type: Object,
    default: () => ({
      fontSizeTimes: 1
    })
  }
});

defineOptions({
  inheritAttrs: false
})

const echartDom = ref(null);
const myChart = shallowRef(null);
const echarts = inject('echarts');

const magnifyFontSizeObj = ref({
  '--custom-font-size-10': pxToRem(props?.dialogData?.fontSizeTimes * 10) + 'px',
  '--custom-font-size-12': pxToRem(props?.dialogData?.fontSizeTimes * 12) + 'px',
  '--custom-font-size-14': pxToRem(props?.dialogData?.fontSizeTimes * 14) + 'px',
  '--custom-line-height-18': pxToRem(props?.dialogData?.fontSizeTimes * 18) + 'px',
})

const initEchart = () => {
  if (echartDom.value) {
    myChart.value = echarts.init(echartDom.value);
    let option = {
      series: [
        {
          type: 'treemap',
          layout: 'orthogonal',
          roam: false,
          nodeClick: false,
          width: '100%',
          height: '100%',
          label: {
            fontSize: pxToRem(9) * props?.dialogData?.fontSizeTimes
          },
          levels: [
            {
              itemStyle: {
                gapWidth: 5,
                borderColor: '#052342'
              }
            },
            {
              itemStyle: {
                gapWidth: 5,
                borderColor: '#052342'
              }
            }
          ],
          data: props?.treemapData?.seriesData,
          breadcrumb: {
            show: false //隐藏底部导航条
          }
        }
      ],
      tooltip: {
        className: 'treemap-tooltip',
        formatter: (info) => {
          const tempClass = info?.data?.areaTb
              ? info?.data?.areaTb > 0 ? 'triangle-reverse' : ''
              : props?.treemapData?.sumPercentage > 0 ? 'triangle-reverse' : ''
          const tempColor = info?.data?.areaTb
              ? info?.data?.areaTb > 0 ? '#01FEFF' : '#E13535'
              : props?.treemapData?.sumPercentage > 0 ? '#01FEFF' : '#E13535'
          return `<p class="tooltip-font-size">${info?.data?.property || '总'}面积：${info?.data?.area || props?.treemapData?.sumAcreage }万㎡</p>
                <p class="tooltip-font-size">占比：${info?.data?.areaZb || '100'}%</p>
                <div class="tooltip-font-size" style="display: flex; align-items: center"><div class="triangle ${tempClass}" :class="{ 'triangle-reverse': ${info?.data?.areaTb > 0} }"></div><span style="color: ${tempColor}">${Math.abs(info?.data?.areaTb) || Math.abs(props?.treemapData?.sumPercentage)}%</span>&nbsp;同比上年</div>`
        }
      }
    };
    option && myChart.value.setOption(option);
  }
}

const changeFontSize = () => { // 动态改变字体大小方法
  magnifyFontSizeObj.value = {
    '--custom-font-size-10': pxToRem(props?.dialogData?.fontSizeTimes * 10) + 'px',
    '--custom-font-size-12': pxToRem(props?.dialogData?.fontSizeTimes * 12) + 'px',
    '--custom-font-size-14': pxToRem(props?.dialogData?.fontSizeTimes * 14) + 'px',
    '--custom-line-height-18': pxToRem(props?.dialogData?.fontSizeTimes * 18) + 'px',
  }
}

const updateChart = () => {
  if (myChart.value) {
    myChart.value.dispose(); // 销毁旧图表实例
  }
  changeFontSize();
  initEchart();
};

defineExpose({
  updateChart
})

onMounted(() => {
  initEchart();
  window.addEventListener("resize", updateChart);
})

onUnmounted(() => {
  window.removeEventListener("resize", updateChart);
})

</script>

<style scoped lang="less">
.content-title {
  display: flex;
  justify-content: space-between;

  > span {
    font-size: var(--custom-font-size-14);
    margin-bottom: 8px;
    color: white;
  }

  .content-title-right {
    display: flex;
    flex: 1;
    justify-content: flex-end;

    .el-row {
      width: 100%;

      .el-col {
        display: flex;
        align-items: center;
      }
    }

    .content-title-item {
      display: flex;
      align-items: center;
      color: white;

      > div:first-child {
        width: var(--custom-font-size-10);
        height: var(--custom-font-size-10);
        margin-right: 3px;
      }

      > div:last-child {
        font-size: var(--custom-font-size-12);
      }
    }

    .content-title-item:not(:last-child) {
      margin-right: 10px;
    }
  }
}

.content-sum {
  width: 100%;
  background-color: rgba(8, 170, 255, 0.5);
  display: flex;
  align-items: center;
  justify-content: space-between;
  box-sizing: border-box;
  padding: 3px 5px 3px 12px;
  font-size: var(--custom-font-size-12);
  margin: 9px 0 8px;
  color: white;
}

/deep/ .treemap-tooltip {
  .tooltip-font-size {
    font-size: var(--custom-font-size-12);
    line-height:var(--custom-line-height-18);
  }
}

.h156 {
  height: 156px;
}

.dialog-h156 {
  width: 1120px;
  height: 700px;
}

.h174 {
  height: 174px;
}
</style>